<template>
  <div>
    <el-form
      :model="searchForm"
      :rules="rules"
      ref="searchFormRef"
      size="mini"
      :disabled="jobStatus == 300"
      :inline="true"
    >
      <div>
        <el-form-item label="缴款日期起止">
          <el-date-picker
            v-model="searchForm.paymentDateStart"
            align="right"
            type="date"
            placeholder="选择开始日期"
            :picker-options="pickerOptions"
            value-format="yyyy-MM-dd"
            format="yyyy 年 MM 月 dd 日"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>-</el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="searchForm.paymentDateEnd"
            align="right"
            type="date"
            placeholder="选择结束日期"
            :picker-options="pickerOptions"
            value-format="yyyy-MM-dd"
            format="yyyy 年 MM 月 dd 日"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="税款所属起止">
          <el-date-picker
            v-model="searchForm.taxPeriodStart"
            align="right"
            type="date"
            placeholder="选择开始日期"
            :picker-options="pickerOptions"
            value-format="yyyy-MM-dd"
            format="yyyy 年 MM 月 dd 日"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>-</el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="searchForm.taxPeriodEnd"
            align="right"
            type="date"
            placeholder="选择结束日期"
            :picker-options="pickerOptions"
            value-format="yyyy-MM-dd"
            format="yyyy 年 MM 月 dd 日"
          >
          </el-date-picker>
        </el-form-item>
        <!-- <el-form-item label="票证号码">
          <el-input v-model="searchForm.ticketNumber" clearable></el-input>
        </el-form-item> -->
        <el-form-item>
          <el-button
            type="primary"
            size="mini"
            @click="getlist('searchFormRef')"
            >查询</el-button
          >
        </el-form-item>
      </div>
    </el-form>
    <success
      v-if="jobStatus == 200 && tableData.length == 0 && !showFlag"
    ></success>
    <el-empty v-if="showFlag" description="暂无数据"></el-empty>
    <faile @goOut="goOut" v-if="jobStatus == 300"></faile>
    <el-card v-if="tableData.length > 0 && jobStatus == 200">
      <el-table :data="tableData" border :fit="true">
        <el-table-column label="序号" type="index" width="50">
        </el-table-column>
        <el-table-column prop="taxType" label="征收项目税(费)种" width="250">
        </el-table-column>
        <el-table-column prop="collectionCategory" label="征收品目" width="180">
        </el-table-column>
        <el-table-column prop="taxPeriodStart" label="税款所属期起" width="180">
        </el-table-column>
        <el-table-column prop="taxPeriodEnd" label="税款所属期止" width="180">
        </el-table-column>
        <el-table-column prop="paymentDate" label="缴款日期" width="180">
        </el-table-column>
        <el-table-column prop="paymentAmount" label="缴款金额" width="180">
        </el-table-column>
        <el-table-column prop="ticketNumber" label="票证号码">
          <template slot-scope="scope">
            <span>{{ scope.row.ticketNumber ? scope.row.ticketNumber : "-" }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="taxAttribute" label="税款属性">
          <template slot-scope="scope">
            <span>{{ scope.row.taxAttribute ? scope.row.taxAttribute : "-" }}</span>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
       class="pageRight"
       background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="searchForm.pageNum"
        :page-size="searchForm.pageSize"
        :page-sizes="[10, 20, 30, 40]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import success from "../../../components/status/success.vue";
import faile from "../../../components/status/faile.vue";
import { timeFun } from "../../../utils/date";

import {
  getcollectCategoryList,
  getTaxTypeList,
  getPaidTaxList,
} from "@/api/tax";
export default {
  components: {
    success,
    faile,
  },
  props: {
    isNeedDate: {
      type: Boolean,
      default: true,
    },
    jobActive: {
      type: String,
      default: "查询任务",
    },
    jobStatus: {
      type: Number,
      default: null,
    },
  },

  watch: {
    jobActive: {
      handler(newVal, oldVal) {
        if (newVal != oldVal) {
          this.searchForm = {
            pageNum: 1,
            pageSize: 10,
            paymentDateEnd: "",
            paymentDateStart: "",
            taxPeriodStart: "", //税款所属期起
            taxPeriodEnd: "", // 税款所属期止
          };
          this.tableData = [];
          this.total = 0;
        }
      },
      deep: true,
      immediate: true,
    },
  },
  created() {
    // if(this.isNeedList) {
    //   this.searchList();
    // }
    // this.showFlag = false;
  },
  data() {
    return {
      //日期配置
      pickerOptions: {
        disabledDate(time) {
          // 获取三年前的今天和昨天的日期
          const threeYearsAgo = new Date();
          threeYearsAgo.setFullYear(threeYearsAgo.getFullYear() - 3);
          threeYearsAgo.setHours(0, 0, 0, 0);

          const yesterday = new Date();
          yesterday.setDate(yesterday.getDate() - 1);
          yesterday.setHours(0, 0, 0, 0);

          // 比较日期是否在三年前的今天和昨天之外
          return (
            time.getTime() < threeYearsAgo.getTime() ||
            time.getTime() > yesterday.getTime()
          );
        },
        shortcuts: [
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一年前",
            onClick(picker) {
              const date = new Date();
              date.setFullYear(date.getFullYear() - 1);
              picker.$emit("pick", date);
            },
          },
          {
            text: "两年前",
            onClick(picker) {
              const date = new Date();
              date.setFullYear(date.getFullYear() - 2);
              picker.$emit("pick", date);
            },
          },
          {
            text: "三年前",
            onClick(picker) {
              const date = new Date();
              date.setFullYear(date.getFullYear() - 3);
              picker.$emit("pick", date);
            },
          },
        ],
      },

      value2: "",
      
      searchForm: {
        pageNum: 1,
        pageSize: 10,
        paymentDateEnd: "",
        paymentDateStart: "",
        taxPeriodStart: "", //税款所属期起
        taxPeriodEnd: "", // 税款所属期止
      },
      rules: {
        taxPeriodStart: [
          {
            type: "string",
            required: true,
            message: "请选择缴款日期开始时间",
            trigger: "change",
          },
        ],
        taxPeriodEnd: [
          {
            type: "string",
            required: true,
            message: "请选择缴款日期结束时间",
            trigger: "change",
          },
        ],
      },
      TaxTypeList: [],
      collectCategoryList: [],
      tableData: [],
      total: 0,
      showFlag: false,
    };
  },
  created() {
    this.showFlag = false;
  },
  methods: {
    goOut() {
      this.$emit("goOut", 1);
    },
    resetForm() {
      // 重置表单验证状态和字段值
      this.$refs.searchFormRef.resetFields();
    },
    getcollectCategoryList() {
      getcollectCategoryList({ enterpriseId: this.jobActive }).then((res) => {
        this.collectCategoryList = this.getTaxTypeList = res.data.map((v) => {
          return {
            value: v,
            label: v,
          };
        });
      });
    },
    handleSizeChange(val) {
      this.searchForm.pageSize = val;
      this.searchList();
    },
    handleCurrentChange(val) {
      this.searchForm.pageNum = val;
      this.searchList();
    },
    // 查询列表
    searchList() {
      this.tableData = [];
      this.total = 0;
      //字段params
      let params = {
        taxPeriodStart: this.searchForm.taxPeriodStart, //税款所属期起
        taxPeriodEnd: this.searchForm.taxPeriodEnd, // 税款所属期止
        pageNum: this.searchForm.pageNum,
        pageSize: this.searchForm.pageSize,
        enterpriseId: this.jobActive,
        paymentDateEnd: this.searchForm.paymentDateEnd,
        paymentDateStart: this.searchForm.paymentDateStart,
      };
      // if (this.isNeedDate) {
      //   if (!timeFun(params.taxPeriodStart, params.taxPeriodEnd)) {
      //     return this.$message.error("结束时间必须大于开始时间哦");
      //   }
      // }

      //判断时间是否符合
      if(params.paymentDateStart || params.paymentDateEnd) {
        if (!timeFun(params.paymentDateStart, params.paymentDateEnd)) {
          return this.$message.error("结束时间必须大于开始时间哦");
        }
      }
      if (params.taxPeriodStart || params.taxPeriodEnd) {
        if (!timeFun(params.taxPeriodStart, params.taxPeriodEnd)) {
          return this.$message.error("结束时间必须大于开始时间");
        }
      }

      // return;
      getPaidTaxList(params).then((res) => {
        if (res.data.list.length == 0) {
          this.showFlag = true;
          return this.$message.error("抱歉，暂时没有查到纳税金额哦");
        } else {
          this.showFlag = false;
        }
        this.tableData = res.data.list;
        this.total = res.data.total;
      });
    },
    getlist(formName) {
      if (this.jobStatus == 300) {
        return this.$message.error("请您输入企业信息后重新查询哦");
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.searchForm.pageNum = 1
          this.searchList();
        } else {
          return false;
        }
      });
    },
    // 重置表单
    restFormValite() {
      this.$refs.searchFormRef.resetFields();
    },
  },
};
</script>

<style lang="scss" scoped>
.mt10 {
  margin-top: 10px;
}
.el-form-item--mini.el-form-item,
.el-form-item--small.el-form-item {
  // display: flex;
  // align-items: center;
  // margin-right: 10px;
}
.progress-main {
  margin: 150px auto;
  width: 500px;
  .jobing {
    margin-top: 20px;
    text-align: center;
    font-size: 14px;
  }
}
</style>